import { useEffect } from "react";
import { websiteStore } from "../store/index.js";
import { DEFAULT_MIN_APPS } from "../config/minapps.js";
import Scrollbars from "react-custom-scrollbars-4";
export const Main = () => {
  const { activeKey } = websiteStore.useContainer();

  if (activeKey == "setting") {
    return <AppSelect />;
  }

  return <Webview />;
};
const Webview = () => {
  const { active } = websiteStore.useContainer();

  return (
    <>
      <div className="absolute z-0 top-1/2 left-1/2 text-[30px] opacity-30 -translate-1/2 text-shadow-2xs font-bold ">
        LOADING...
      </div>
      <iframe
        src={active.url}
        // src={`http://127.0.0.1:4400/?url=${encodeURIComponent(data.url)}`}
        allow="cross-origin-isolated"
        onLoad={() => {
          console.log("ssssssssssss");
        }}
        onError={(e) => {
          message.error("加载失败");
          console.log(e);
        }}
        className="w-full h-full relative z-10"
      ></iframe>
    </>
  );
};

const AppSelect = () => {
  const { addWebsite } = websiteStore.useContainer();
  return (
    <Scrollbars>
      <div className="flex flex-wrap items-center justify-center bg-white p-2">
        {DEFAULT_MIN_APPS.map((item) => (
          <div
            className="flex flex-col items-center w-[120px] h-[120px] justify-center rounded-md hover:bg-gray-100  cursor-pointer"
            key={item.name}
            onClick={() => {
              addWebsite(item);
            }}
          >
            <img src={item.logo} className="size-14 mb-1 rounded-lg" />
            {item.name}
          </div>
        ))}
      </div>
    </Scrollbars>
  );
};
